<template>
    <div class="transfer">
        <!--<van-picker-->
                <!--show-toolbar-->
                <!--title="请选择站点"-->
                <!--:columns="options"-->
                <!--@cancel="onCancel"-->
                <!--@confirm="onConfirm"-->
        <!--&gt;</van-picker>-->
        <div style="position:fixed;top: 0px;left:0px;width: 100%;">
            <van-search
                    v-model.trim="searchValue"
                    placeholder="请输入站点关键词"
                    show-action
                    @search="onSearch">
                <!--<div slot="action" @click="onSearch">搜索</div>-->
            </van-search>
        </div>
        <div  style="background-color: #fff">
            <div class="check-list" @click="checkNo">不选</div>
            <div class="check-list" v-for="(item,index) in options" :key="index" @click="checkOption(item.id,item.name)">{{item.name}}{{item.admin?"(" + item.admin.name + ")":"(无管理员)"}}</div>
        </div>
    </div>
</template>

<script>

    import {Picker,Toast,Search} from 'vant';
    export default {
        components: {
            [Picker.name]: Picker,
            [Search.name]: Search,
            [Toast.name]: Toast
        },
        props: {
            value: {
                type: Number,
                default: null
            },
            option: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        data() {
            return {
                columns: [
                    { text: '杭州' },
                    { text: '宁波' },
                    { text: '温州' }
                ],
                myValue: null,
                searchValue: '',
                options: [],
                times:null
            }
        },
        created() {
            this.options = this.option;
        },
        mounted() {

        },
        // computed: {
        //     options() {
        //         let arr = [];
        //         // arr.push({
        //         //     id:0,
        //         //     checked:true,
        //         //     text: '不选择站点'
        //         // });
        //         // this.option.forEach((item)=>{
        //         //     arr.push({
        //         //         id:item.id,
        //         //         checked: true,
        //         //         text:item.name + JSON.stringify(item.admin?"(" + item.admin.name + ")":"(无人)").replace(/\"/g, "")})
        //         //     });
        //         // arr = this.option.map(item => {return {
        //         //     id:item.id,
        //         //     text:item.name + JSON.stringify(item.admin?"(" + item.admin.name + ")":"(无人)").replace(/\"/g, "")}
        //         // });
        //         // this.option.forEach(item => {
        //         //         Object.assign(item,{checked: true});
        //         //     })
        //         // return this.option;
        //     }
        // },
        watch: {
            value: function(val) {
                this.myValue = this.value;
            },
            myValue: function(val) {
                this.$emit('input', this.myValue);
            },
            searchValue:function(val) {
                clearInterval(this.times);
                this.times = setTimeout(() => {
                    this.onSearch();
                },500)
            }

        },
        methods: {
            onSearch() {
                this.options = [];
                if (this.searchValue == '') {
                    this.option.forEach((item,index)=> {
                        this.options.push(item);
                    });
                } else {
                    let reg = new RegExp(this.searchValue);
                    this.option.forEach((item,index)=> {
                        if (reg.test(item.name)) {
                            this.options.push(item);
                        }
                    });
                }
            },
            checkNo() {
                this.myValue = null;
                // this.$emit('closeActionSheet');
                this.$emit('selectSiteName','');
                this.searchValue= '';
            },
            checkOption(id,text) {
                    this.myValue = id;
                    this.$emit('selectSiteName',text);
                    this.searchValue= '';
            }
            // onConfirm(value, index) {
            //     if (value.id == 0) {
            //         this.myValue = null;
            //         this.$emit('closeActionSheet');
            //         this.$emit('selectSiteName','');
            //     }else {
            //         this.myValue = value.id;
            //         this.$emit('selectSiteName',value.text);
            //     }
            //
            // },
            // onCancel() {
            //    this.$emit('closeActionSheet');
            // }
        }
    }
</script>

<style scoped lang="less">
    .transfer {
        padding-top: 46px;
        .check-list{
            text-align: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }
    }
</style>
